<template>
  <el-button @click="saveChartDesignerData">保存</el-button>
  <div id="DataDrilling_PenetrateMain" style="width: 100%; height: 1024px"></div>
  <hyperLinkDialog @submit="hyperLinkSubmit" ref="hyperLinkRef"></hyperLinkDialog>

</template>
<script setup>
import {ref, onMounted} from 'vue';
import report from './getSaveData.json'
import _onupdatedatasetlist from './onUpdateDatasetList_商品区域销售.json'
import _onupdatedata from './onUpdateData_商品区域销售_商品季度销售.json'
//hyperLinkDialog 为穿透编辑弹框vue文件。内容为下面内容。
import hyperLinkDialog from "./hyperLinkDialog.vue";
import {$bus} from "@/bus/index.js"
import {queryonUpdateDataFrom} from "@/utils/onUpdateDataUtils.js";

let option = { //参数配置说明 根据您的需求填写option
  uploadImage: { //上传图片相关信息 如果不传该字段时，设计器用到的所有上传图片配置项均不显示。
    server: "url",//上传图片地址
    method: "post",//上传图片请求方式
    headers: { //上传图片请求头
      "Authorization": "Token XXXXXXXX"
    },
    fieldName: "file",
    resultField: "file"
  },
  pageData: { //画布初始化时的宽高
    width: '1920px',
    height: '1080px'
  },
  dataSet: [ //数据集按钮的方式
    { //Json数据
      id: 1,
      value: "新建Json数据集"
    },
    { //http请求数据
      id: 2,
      value: "新建Http接口数据集"
    },
    { //API服务数据
      id: 3,
      value: "API服务数据集"
    },
    {
      id: 4,
      value: "外部数据集"  //  新建一个新的报表实例，如果希望可以预先动态从后台提供几个数据集供其使用，这个配置必须有；
      // 然后只要动态的从后台拿到n个数据集，全部用 results格式装配，onUpdateDatasetList方法来触发
    }
  ]

}

//预先提供：以外部数据源的方式，动态请求来提供‘候选数据集列表’
function onUpdateDatasetList() {
  console.log("...DataDrillingPenetrateMain.vue....onUpdateDatasetList  is called")
  return new Promise((resolve, reject) => {
    resolve(_onupdatedatasetlist)
  })
}

//正常应该是和报表设计器一样，这里的x个表结构，对于报表设计器/bi设计器来说，是外部数据源的待选数据集列表
function onUpdateData(datasets, params) {
  console.log("...DataDrillingPenetrateMain.vue....onUpdateData is called,", datasets, params);
  return new Promise((resolve, reject) => {
    resolve(queryonUpdateDataFrom(datasets, params, _onupdatedata));
    //resolve(_onupdatedata)
  })
}


option.onUpdateDatasetList = onUpdateDatasetList
option.onUpdateData = onUpdateData
let chartdesiger
const hyperLinkRef = ref();
let eventIndex = ref(0)
onMounted(() => {
  //在嵌入设计器时
  chartdesiger = new XZChartDesigner("#DataDrilling_PenetrateMain", option, report);
  //穿透点击编辑时事件
  chartdesiger.on('_penetrate', (obj) => {

    let {content, index, controlType} = obj;
    // content.openType=1   浏览器新窗口
    // content.openType=2   浏览器当前窗口
    // content.openType=3   浏览器当前弹框
    // content.params 数组
    // content.params[0].key 参数名
    // content.params[0].value 参数值
    // content.params[0].type 参数类型
    //                        =1 传递动态字段值
           //                 =2 传递固定值
    // content 为穿透弹框保存的回显配置信息
    // index 该穿透控件在事件列表中的位置。用于content的存储。
    // controlType 该穿透控件类型
    console.log('--------->obj: ', obj)
    eventIndex.value = obj.index;
    hyperLinkRef.value.show(obj.content, true)
  })

  $bus.on('PenetrateMain_preview', (previewcall) => {
    console.log('...DataDrillingPenetrateMain.vue..$bus.on')
        let config=chartdesiger.getSaveData().config;
        let dataConfig=chartdesiger.getSaveData().data.dataConfig;
        previewcall(config, dataConfig,_onupdatedatasetlist, _onupdatedata);
      }
  )
})
//穿透编辑弹框保存时事件
const hyperLinkSubmit = (val) => {
  chartdesiger.setHyperlink({index: eventIndex.value, content: val})
  //console.log('...DataDrillingPenetrateMain.vue..chartdesiger.getHyperlink.', val)
  // 存储value
}
const saveChartDesignerData = () => {
  console.log('...DataDrillingPenetrateMain.vue..chartdesiger.getSaveData():',chartdesiger.getSaveData())

}


</script>

